<template>
  <div class="debounce-view">
    <div class="item-view">
      <p class="item-title">节流</p>
      <div class="cart-view">
        <p class="cart-title">提示：</p>
        <div class="value">
          n秒内只运行一次，如果n秒内重复触发，则只有一次生效
        </div>
      </div>

      <div class="content">
        <van-button type="primary" hairline @click="getThrottleOne(3000)"
          >3秒节流 one</van-button
        >
        <van-button
          style="margin-left: 10px"
          type="primary"
          hairline
          @click="getThrottleToo(throttle)"
          >3秒节流 too</van-button
        >
        <van-button
          style="margin-left: 10px"
          type="primary"
          hairline
          ref="throttle_3_ref"
          >3秒节流 three</van-button
        >
      </div>
    </div>
    <div class="item-item">
      <p class="item-title">防抖</p>
      <div class="cart-view">
        <p class="cart-title">提示：</p>
        <div class="value">
          n秒后执行该事件，若在n秒内被重复触发，则重新计时，直到内秒后触发
        </div>
      </div>
      <div class="content">
        <van-button type="primary" hairline @click="getDebounceOne(3000)"
          >3秒防抖 one</van-button
        >
        <van-button
          style="margin-left: 10px"
          type="primary"
          hairline
          @click="getDebounceTwo(deboince)"
          >3秒防抖 two</van-button
        >
      </div>
    </div>
    <div class="msg-text">注：文字首行缩进 【text-indent: 28px;】</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { throttle_2, throttle_3, deboince_1 } from "../../utils/utils";
export default {
  computed: {},
  data() {
    return {
      oneCount: 0,
      tooCount: 0,
      threeCount: 0,
      fourCount: 0,
      startime: 0,
      oneTimer: null,
      debouncTimer: null,
    };
  },

  mounted() {
    // 节流
    let throttle_3_ref = this.$refs.throttle_3_ref;
    throttle_3_ref.addEventListener("click", throttle_2(this.throttle, 3000));
  },
  methods: {
    getThrottleOne(delay = 3000) {
      this.oneCount += 1;
      if (!this.oneTimer) {
        Toast("3秒节流" + this.oneCount);
        this.oneTimer = setTimeout(() => {
          this.oneTimer && clearTimeout(this.oneTimer);
          this.oneTimer = null;
        }, delay);
      }
    },

    getThrottleToo: throttle_3((throttle) => {
      throttle && throttle();
    }, 3000),

    //要执行的节流函数
    throttle() {
      Toast("3秒节流" + this.tooCount);
    },
    getDebounceOne(delay) {
      this.threeCount += 1;
      this.debouncTimer && clearTimeout(this.debouncTimer);
      this.debouncTimer = setTimeout(() => {
        Toast("3秒防抖" + this.threeCount);
        this.debouncTimer && clearTimeout(this.debouncTimer);
      }, delay);
    },
    getDebounceTwo: deboince_1((deboince) => {
      deboince();
    }, 1000),

    deboince() {
      Toast("3秒防抖");
    },
  },
};
</script>
<style lang="scss" scoped>
.debounce-view {
  // padding: 0 10px;
  height: 100%;
  overflow: hidden;
  .item-title {
    padding: 0;
    margin: 10px;
    font-size: 16px;
    font-weight: 800;
  }
  .cart-view {
    background-color: #eee;
    padding: 10px 20px;
    .cart-title {
      font-size: 14px;
      padding: 0;
      margin: 0;
      color: #409eff;
    }
    .value {
      font-size: 14px;
      margin-top: 10px;
      text-indent: 28px;
    }
  }
  .content {
    margin: 10px 0;
  }
  .msg-text {
    font-size: 12px;
    color: ccc;
  }
}
</style>